<template>
  <!-- 个人资料 -->
  <view class="pages">
    <view v-if="userInfo?.is_audit && finish">
      <view class="content mar-b-20">
        <view class="item-avtar flex-column-center">
          <view
            class="lv-pages-content-bodyer-card-rt mar-b-20"
            @click="openAuth"
            style="position: relative"
          >
            <up-avatar
              :src="
                userInfo?.avatar ||
                'https://ossresource.miyingbl.com/uploads/20231230/h-bl-app/1703899956674'
              "
              :icon="userInfo?.avatar ? '' : 'camera'"
              size="60"
            ></up-avatar>
            <view class="icons flex-center" v-show="userInfo?.avatar">
              <up-icon name="camera" color="#fff" size="14"></up-icon>
            </view>
          </view>
          <view class="title_dec">请上传真人头像，提高用户下单率</view>
        </view>

        <view class="item">
          <view class="title"> <text style="color: #cb5000">*</text>姓名</view>
          <view class="lv-pages-content-bodyer-card-rt">
            <text>{{ userInfo?.name }}</text>
          </view>
        </view>
        <view class="item">
          <view class="title"><text style="color: #cb5000">*</text>身份证号</view>
          <view class="lv-pages-content-bodyer-card-rt">
            <text>{{ userInfo?.idCard }}</text>
          </view>
        </view>
        <view class="item">
          <view class="title"><text style="color: #cb5000">*</text>手机号</view>
          <view class="lv-pages-content-bodyer-card-rt">
            <text>{{ userInfo?.phone }}</text>
          </view>
        </view>
        <view class="item">
          <view class="title">在职医院</view>
          <view class="lv-pages-content-bodyer-card-rt" @click="isOkToast1" style="width: 366rpx">
            <input
              v-if="!isOk1()"
              type="text"
              v-model="userInfo.hospital_name"
              placeholder="未填写"
              border="none"
              @blur="changeHospital"
              style="pointer-events: none; width: 366rpx; font-size: 28rpx"
            />
            <input
              v-else
              type="text"
              v-model="userInfo.hospital_name"
              placeholder="未填写"
              @blur="changeHospital"
              style="width: 366rpx; font-size: 28rpx"
            />
          </view>
        </view>
        <view
          class="item"
          style="min-height: 105rpx; height: auto"
          :style="
            userInfo?.rf_name && userInfo?.rf_name.length > 0
              ? 'align-items: baseline'
              : 'align-items: center'
          "
        >
          <view class="title">科室</view>
          <view
            class="lv-pages-content-bodyer-card-rt"
            :style="
              userInfo?.rf_name && userInfo?.rf_name.length > 0
                ? 'align-items: baseline'
                : 'align-items: center'
            "
            @click="navigateTo(`/pages-users/my-page/myOffice?type=edit`)"
          >
            <!-- <input
              v-if="!isOk2()"
              type="text"
              v-model="userInfo.rf_name"
              maxlength="10"
              placeholder="未填写"
              border="none"
              :disabled="!isOk2()"
              @blur="changerfName"
              style="pointer-events: none"
            />
            <input
              v-else
              type="text"
              v-model="userInfo.rf_name"
              maxlength="10"
              placeholder="未填写"
              border="none"
              @blur="changerfName"
            /> -->
            <view
              v-if="!userInfo.rf_name"
              style="
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 28rpx;
                color: gray;
              "
              >未填写</view
            >
            <view v-else style="width: 400rpx; padding: 40rpx 0; text-align: right">
              <text class="u-line-5">{{ userInfo?.rf_name.join('/') }}</text>
            </view>
            <u-icon name="arrow-right" color="#AAAAAA" size="16"></u-icon>
          </view>
        </view>
        <view class="item">
          <view class="title">职称</view>
          <view class="lv-pages-content-bodyer-card-rt">
            <view
              style="
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 28rpx;
                color: gray;
              "
              v-if="!userInfo?.level"
            >
              未填写</view
            >
            <text v-else>{{ userInfo?.level }}</text>
            <u-icon
              name="arrow-right"
              color="#AAAAAA"
              size="16"
              @click="toSheet"
              v-if="!userInfo?.level"
            ></u-icon>
            <u-icon
              name="close-circle-fill"
              color="#AAAAAA"
              size="16"
              @click="toClear"
              v-if="userInfo?.level"
            ></u-icon>
          </view>
        </view>
      </view>
      <view class="content_2 mar-b-20">
        <view
          class="item"
          style="min-height: 105rpx; height: auto"
          :style="userInfo?.adept ? 'align-items: baseline' : 'align-items: center'"
        >
          <view class="title">简介/擅长</view>
          <view
            class="lv-pages-content-bodyer-card-rt"
            style="align-items: baseline"
            :style="userInfo?.adept ? 'align-items: baseline' : 'align-items: center'"
            @click.stop="navigateTo('/pages-users/my-page/myBrief?type=edit')"
          >
            <view
              v-if="!userInfo.adept"
              style="
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 28rpx;
                color: gray;
              "
              >未填写</view
            >
            <view v-else style="width: 400rpx; padding: 40rpx 0; text-align: left">
              <text class="u-line-5" style="font-size: 28rpx; color: #333333">{{
                userInfo.adept
              }}</text>
            </view>
            <u-icon name="arrow-right" color="#AAAAAA" size="16"></u-icon>
          </view>
        </view>
        <view
          class="item"
          style="min-height: 105rpx; height: auto"
          :style="
            userInfo?.new_labels && userInfo?.new_labels.length > 0
              ? 'align-items: baseline'
              : 'align-items: center'
          "
        >
          <view class="title">个人标签</view>
          <view
            class="lv-pages-content-bodyer-card-rt"
            :style="
              userInfo?.new_labels.length > 0 ? 'align-items: baseline' : 'align-items: center'
            "
            @click.stop="navigateTo('/pages-users/my-page/myLabel?type=edit')"
          >
            <view
              class="tag"
              v-if="userInfo?.new_labels && userInfo?.new_labels.length > 0"
              :style="userInfo?.new_labels ? 'padding: 40rpx 0' : ''"
            >
              <view
                class="tagItem mar-l-16"
                v-for="(item, index) in userInfo?.new_labels"
                :key="index"
                :style="
                  userInfo?.new_labels.length > 2 ? 'margin-bottom:20rpx' : 'margin-bottom:0rpx'
                "
              >
                {{ item }}
              </view>
            </view>
            <view
              v-else
              style="
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 28rpx;
                color: gray;
              "
              >未填写</view
            >
            <u-icon name="arrow-right" color="#AAAAAA" size="16"></u-icon>
          </view>
        </view>
      </view>
      <view class="content_3 mar-b-20">
        <view class="title mar-b-20">医师职业证书</view>
        <view class="images h-flex u-row-between">
          <view
            class="img"
            v-for="(item, index) in userInfo.doctor_practicing_certificate"
            :key="index"
          >
            <image :src="item" style="width: 321rpx; height: 250rpx; border-radius: 10rpx" />
          </view>
        </view>
      </view>
      <view class="content_3">
        <view class="title mar-b-20">医师资格证书</view>
        <view class="images h-flex u-row-between">
          <view class="img" v-for="(item, index) in userInfo.doctor_qualification" :key="index">
            <image :src="item" style="width: 321rpx; height: 250rpx; border-radius: 10rpx" />
          </view>
        </view>
      </view>
    </view>
    <view v-else-if="!userInfo?.is_audit && finish" class="w-750 flex-column-row-start">
      <view class="no_ren">
        <image src="https://ossresource.miyingbl.com/def/6226c202405231703231497.png"></image>
        <view class="prompt mar-t-10">暂无信息，请先完成医师认证</view>
        <view class="btn flex-center mar-t-30" @click="toPage">去认证</view>
      </view>
    </view>
    <!-- <up-action-sheet
      :actions="levelList"
      :closeOnClickOverlay="true"
      :closeOnClickAction="true"
      :safeAreaInsetBottom="true"
      :show="showSheet"
      cancelText="取消"
      @select="selectClick"
      @close="showSheet = false"
    ></up-action-sheet> -->
    <h-sheet
      :show="showSheet"
      :actions="levelList"
      @close="showSheet = false"
      @select="selectClick"
    >
    </h-sheet>
    <h-authpup ref="authpup" type="top" @changeAuth="changeAuth" permissionID="CAMERA"></h-authpup>
    <h-authpup
      ref="authpupcun"
      type="top"
      @changeAuth="changeAuthcun"
      permissionID="WRITE_EXTERNAL_STORAGE"
    ></h-authpup>
    <up-action-sheet
      :actions="chooselist"
      @select="selectImage"
      @close="imgaeClose"
      cancelText="取消"
      closeOnClickOverlay
      :show="chooseshow"
    ></up-action-sheet>
  </view>
</template>

<script setup>
import { ref, nextTick } from 'vue'
import { onLoad, onShow } from '@dcloudio/uni-app'
import { showToast, navigateTo } from '@/utils'
import { useMemberStore } from '@/stores'
import { doctorInfo } from '@/api/home'
import { getDoctorLevel } from '@/api/business'
import { updateDoctorInfo } from '@/api/my'
import { uploadApi } from '@/utils/upLoad'
const authpupcun = ref()

const chooselist = ref([
  { name: '拍摄', type: 1 },
  { name: '从相册选择', type: 2 },
])
const chooseshow = ref(false)
function imgaeClose() {
  chooseshow.value = false
}
function selectImage(e) {
  if (e.type == 1) {
    nextTick(() => {
      authpup.value.open()
    })
  } else {
    nextTick(() => {
      authpupcun.value.open()
    })
  }
}
const authpup = ref(null)
const finish = ref(false)
const loading = ref(false)
var endDate = ref('')
const levelList = ref([
  {
    name: '副主任医师',
    color: '#202020',
    fontSize: '30rpx',
  },
])
const now = new Date()
const is_ren = ref(true)
function isOk() {
  const timestamp = now.getTime()
  const lastModifiedDate = new Date(userInfo.value?.last_avatar_time) || 0
  const timeDifference = timestamp - lastModifiedDate.getTime()
  return timeDifference / (1000 * 3600 * 24) < 15 ? false : true
}
function isOk1() {
  const timestamp = now.getTime()
  const lastModifiedDate = new Date(userInfo.value?.last_hospital_time) || 0
  const timeDifference = timestamp - lastModifiedDate.getTime()
  return timeDifference / (1000 * 3600 * 24) < 30 ? false : true
}
function isOk2() {
  const timestamp = now.getTime()
  const lastModifiedDate = new Date(userInfo.value?.last_rf_time) || 0
  const timeDifference = timestamp - lastModifiedDate.getTime()
  return timeDifference / (1000 * 3600 * 24) < 30 ? false : true
}
function isOk3() {
  const timestamp = now.getTime()
  const lastModifiedDate = new Date(userInfo.value?.last_level_time) || 0
  const timeDifference = timestamp - lastModifiedDate.getTime()
  return timeDifference / (1000 * 3600 * 24) < 30 ? false : true
}
function changeAuth() {
  uni.chooseImage({
    count: 1,
    sizeType: 'compressed',
    success: async (e) => {
      const tempFilePaths = e.tempFiles
      let extension = ''
      // #ifdef APP-IOS || H5
      extension = tempFilePaths[0]['name'].split('.').pop()
      // #endif
      // #ifdef APP-PLUS || APP-ANDROID
      extension = tempFilePaths[0]['path'].split('.').pop()
      // #endif
      console.log('extension', extension)
      const arr = ['gif', 'GIF'] // 允许的图片格式列表
      if (extension && arr.includes(extension)) {
        uni.showToast({
          title: '不支持上传GIF图',
          icon: 'none',
        })
      } else {
        const url = await uploadApi(e.tempFilePaths[0])
        const res = await updateDoctorInfo({
          avatar: url,
          type: 4,
        })
        if (res.code === 200) {
          uni.$emit('updateUserInfo')
          getDoctorInfo()
        }
        showToast(res.message || res.msg)
      }
    },
  })
}
function changeAuthcun() {
  uni.chooseImage({
    count: 1,
    sizeType: ['original', 'compressed'],
    sourceType: ['album'],
    success: async (e) => {
      console.log('e', e)
      const tempFilePaths = e.tempFiles
      console.log('tempFilePaths', tempFilePaths)
      const extension = tempFilePaths[0]['path'].split('.').pop()
      console.log('extension', extension)
      const arr = ['jpg', 'png', 'jpeg', 'JPG', 'PNG', 'JPEG']
      if (extension && !arr.includes(extension)) {
        uni.showToast({ title: '图片格式仅支持JPG、PNG、JPEG', icon: 'none' })
      } else {
        const url = await uploadApi(e.tempFilePaths[0])
        const res = await updateDoctorInfo({
          avatar: url,
          type: 4,
        })
        if (res.code === 200) {
          uni.$emit('updateUserInfo')
          getDoctorInfo()
        }
        showToast(res.message)
      }
    },
  })
}
function openAuth() {
  if (userInfo.value.is_audit) {
    // nextTick(() => {
    //   authpup.value.open()
    // })
    if (isOk()) {
      chooseshow.value = true
      // nextTick(() => {
      //   authpup.value.open()
      // })
    } else {
      uni.showToast({
        title: '15天之内只能修改一次头像',
        icon: 'none',
      })
    }
  }
}
async function selectClick(e) {
  console.log('e', e)
  const res = await updateDoctorInfo({
    type: 3,
    level_id: e.id,
  })
  if (res.code == 200) {
    uni.$emit('updateUserInfo')
    getDoctorInfo()
  }
  showToast(res.message)
  showSheet.value = false
}
const toSheet = () => {
  if (userInfo.value.is_audit) {
    showSheet.value = true
  }
}
const toClear = () => {
  userInfo.value.level = ''
  // if (isOk3()) {
  //   userInfo.value.level = ''
  // } else {
  //   uni.showToast({
  //     title: '30天内只能修改一次',
  //     icon: 'none',
  //   })
  // }
}
const showSheet = ref(false)
const userInfo = ref({})
const toPage = () => {
  uni.navigateTo({
    url: '/pages-users/my-page/physician',
  })
}
onShow(async () => {
  getDoctorInfo()
  getLevel()
})

async function getDoctorInfo() {
  const res = await doctorInfo()
  userInfo.value = res.data
  finish.value = true
}
async function getLevel() {
  const res = await getDoctorLevel()
  levelList.value = res.data.map((item) => {
    return {
      name: item.name,
      id: item.id,
      color: '#202020',
      fontSize: '30rpx',
    }
  })
}
/**
 * 更新用户信息
 */
const userStore = useMemberStore()
const from = ref('')
onLoad((options) => {
  try {
    getDate()
    if (options.from) {
      from.value = options.from
    }
  } catch (error) {}
})
function getDate() {
  let date = new Date()
  let year = date.getFullYear() //获取当前年份
  let month = date.getMonth() + 1
  if (month < 10) {
    month = '0' + month
  }
  let today = date.getDate()
  var nm = month - 10
  var ny = year
  if (nm < 0) {
    ny = year - 1
    nm = 12 + nm
  }
  endDate.value = year + '-' + month + '-' + today
}
const isOkToast1 = () => {
  if (!isOk1()) {
    uni.showToast({
      title: '30天内只能修改一次',
      icon: 'none',
    })
  }
}
const isOkToast2 = () => {
  console.log('isOk2')
  if (isOk2()) {
  } else {
    uni.showToast({
      title: '30天内只能修改一次',
      icon: 'none',
    })
    return false
  }
}
const isOkToast3 = () => {
  if (isOk1()) {
  } else {
    uni.showToast({
      title: '30天内只能修改一次',
      icon: 'none',
    })
    return false
  }
}
async function changeHospital(e) {
  if (isOk1()) {
    const res = await updateDoctorInfo({
      type: 1,
      hospital_name: e.detail.value,
    })
    if (res.code == 200) {
      uni.$emit('updateUserInfo')
      getDoctorInfo()
    }
    showToast(res.message)
  } else {
    uni.showToast({
      title: '30天内只能修改一次',
      icon: 'none',
    })
  }
}
const inputHospital = (e) => {
  console.log('eeeeee', e)
}
async function changerfName(e) {
  const res = await updateDoctorInfo({
    type: 2,
    rf_name: e.detail.value,
  })
  if (res.code == 200) {
    getDoctorInfo()
  }
  showToast(res.message)
}
</script>

<style scoped lang="scss">
.pages {
  width: 750rpx;
  background-color: #f5f6f8;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 80rpx;
  padding-top: 25rpx;
  .item {
    height: 105rpx;
    background-color: #fff;
    border-bottom: 1rpx solid #e3e3e3;

    .left {
      margin-right: 16rpx;
    }
  }

  .content {
    width: 702rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #fff;
    border-radius: 20rpx;
    padding: 0 24rpx;

    :last-child {
      border: none !important;
    }

    .item {
      width: 662rpx;
      height: 120rpx;
      border-bottom: 1rpx solid #f1f1f1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 28rpx;
      .title {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #202020;
      }

      .lv-pages-content-bodyer-card-rt {
        display: flex;
        justify-content: flex-end;
        font-size: 28rpx;

        .lv-pages-content-bodyer-card-picker-pl {
          color: #868686;
          font-size: 24rpx;
        }

        ::v-deep .placeholder-class {
          font-size: 24rpx;
        }

        .text-input {
          text-align: right;
        }

        ::v-deep .u-icon {
          margin-left: 16rpx;
        }
        .autograph {
          width: 400rpx; /* 设置你需要的宽度 */
          overflow: hidden; /* 隐藏超出容器的部分 */
          white-space: nowrap; /* 防止文字换行 */
          text-overflow: ellipsis; /* 当文本溢出时显示省略号 */
          text-align: right;
        }
      }
    }

    .item-avtar {
      width: 662rpx;
      height: 277rpx;
      padding: 50rpx 0;
      border-bottom: 1rpx solid #f1f1f1;
      box-sizing: border-box;
      .title_dec {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 26rpx;
        color: #aaaaaa;
      }
    }
  }
  .content_2 {
    width: 702rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #fff;
    border-radius: 20rpx;
    padding: 0 24rpx;
    :last-child {
      border: none !important;
    }

    .item {
      width: 662rpx;
      height: 120rpx;
      border-bottom: 1rpx solid #f1f1f1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .title {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #202020;
      }

      .lv-pages-content-bodyer-card-rt {
        display: flex;
        justify-content: flex-end;

        .lv-pages-content-bodyer-card-picker-pl {
          color: #868686;
          font-size: 24rpx;
        }

        ::v-deep .placeholder-class {
          font-size: 24rpx;
        }

        .text-input {
          text-align: right;
        }

        ::v-deep .u-icon {
          margin-left: 16rpx;
        }
        .autograph {
          width: 400rpx; /* 设置你需要的宽度 */
          overflow: hidden; /* 隐藏超出容器的部分 */
          white-space: nowrap; /* 防止文字换行 */
          text-overflow: ellipsis; /* 当文本溢出时显示省略号 */
          text-align: right;
        }
      }
    }
  }
  .content_3 {
    width: 702rpx;

    background-color: #fff;
    border-radius: 20rpx;
    padding: 30rpx 20rpx;
    .title {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      color: #202020;
    }
    .images {
      .img {
        width: 321rpx;
        height: 250rpx;
        border-radius: 10rpx;
      }
    }
  }
  .no_ren {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 300rpx;
    image {
      width: 226rpx;
      height: 200rpx;
    }
    .prompt {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 26rpx;
      color: #aaaaaa;
    }
    .btn {
      width: 360rpx;
      height: 88rpx;
      background: #00c1b9;
      border-radius: 48rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 32rpx;
      color: #ffffff;
    }
  }
}
.tag {
  width: 400rpx;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;

  .tagItem {
    text-align: center;
    // line-height: 1;
    background: #d6fcfb;
    border-radius: 20rpx;
    min-width: 100rpx;
    height: 46rpx;
    padding: 5rpx 20rpx;
    // box-sizing: border-box;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 26rpx;
    color: #44d3ce;
  }
}
.icons {
  width: 32rpx;
  height: 32rpx;
  background: #00c1b9;
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 99;
  border-radius: 50%;
}
::v-deep .uni-input-wrapper {
  text-align: right;
}
</style>
